<template>
  <main>
    <masthead 
      :imgUrl="imgUrl" 
      :page="page"
      :pageTitle="pageTitle"
    ></masthead>
    <article>
      <Row>
        <Col :xs="24" :sm="24" :md="24" :lg="17" :xl="17" class="left-module"> 
          <div class="bangumi">
            <bangumi-box :watchingList="watchingList"></bangumi-box>
            <!--分页-->
            <Page 
              v-if="totalBlog > pageSize"
              :total="totalBlog" 
              :current="currentPage"
              :page-size="pageSize"
              size="small" 
              show-elevator 
              @on-change="changePage"
             />
            <p class="message-head">
              <span>评论</span>
            </p>
            <div id="vcomments" style="margin: 0 1rem;"></div>
          </div>
        </Col>
        <right-module></right-module>
      </Row>
    </article>
  </main>
</template>

<script>
import Valine from 'valine'
import { getComment } from 'utils/initValine'
import { bangumiWatching } from 'service'

export default { 
  name: 'Bangumi',
  data() {
    return {
      imgUrl: 'http://cdn.yozora.top/image/type.jpg',
      page: 1,
      pageTitle: '番剧',
      watchingList: [],
      totalBlog: 8,
      currentPage: 1,
      pageSize: 8
    }
  },
  mounted() {
    this.getBangumiWatching()
    getComment()
  },
  methods: {
    //追番列表
    async getBangumiWatching() {
      let res = await bangumiWatching()
      this.watchingList = res.data
      this.totalBlog = this.watchingList.length
      // 伪分页
      this.watchingList = this.watchingList.slice(
        (this.currentPage-1) * this.pageSize, 
        this.pageSize * this.currentPage
      )
    },
    changePage(currentPage) {
      this.currentPage = currentPage
      this.getBangumiWatching()
    }
  },
  components: {
    "right-module": () => import("./unit/RightModule"),
    "masthead": () => import("components/masthead/Masthead"),
    "bangumi-box": () => import("components/common/BangumiBox"),
  }
}
</script>

<style lang="scss" scoped>
.ivu-page {
  text-align: center;
  padding: 1rem 0 2rem;
}
main {
  max-width: 100%;
  margin: 0 auto;
  article {
    position: relative;
    max-width: 1180px;
    margin: 20px auto 0;
  }
}
.left-module {
  padding: 1rem;
  animation: main 0.3s linear;
  .bangumi {
    padding: 1rem 0;
    box-shadow: 0 2px 9px rgba(31, 45, 61, 0.15);
    background: #fff;
    border-radius: 8px;
    .message-head {
      margin: 0 1rem;
      &::before {
        position: absolute;
        top: -7px;
        left: 0;
        font-size: 24px;
        font-weight: bold;
        color: #eb5055;
        content: '|';
      }
      position: relative;
      margin-top: 30px;
      margin-bottom: 16px;
      font-size: 1rem;
      color: #24292e;
      span {
        margin-left: 12px;
      }
    }
  }
}
</style>